<template>
  <div class="login-contain" ref="login">
    <!-- 头部区域 -->
    <div class="login-header">
      <p>欢迎登录</p>
    </div>
    <div class="login-logo" align="center">
      <img src="../../assets/image/wt.jpg" alt="" />
      <p>LuckyCat</p>
    </div>
    <!-- 表单区域 -->
    <div class="form-group">
      <van-form @submit="onSubmit">
        <van-field
          v-model="user.mobile"
          :rules="rules.mobile"
          placeholder="请输入手机号"
          class="mobile"
        >
          <template #left-icon>
            <i class="iconfont  icon-phone"></i>
          </template>
        </van-field>

        <van-field
          v-model="user.code"
          :rules="rules.code"
          placeholder="请输入验证码"
          class="code"
        >
          <template #button>
            <a :disabled="totalTime != 60" @click.prevent="getCode"
              ><span v-if="totalTime != 60">{{ totalTime }}s后重试</span>
              <span v-else>获取验证码</span>
            </a>
          </template>
          <template #left-icon>
            <i class="iconfont  icon-codev2"></i>
          </template>
        </van-field>
        <van-button
          type="primary"
          size="large"
          round
          native-type="submit"
          :loading="isLoading"
          loading-text="登录中..."
          >登录</van-button
        >
      </van-form>
    </div>
    <!-- 底部区域 -->
    <div class="casual">
      <a href="#" @click="gg">随便逛逛</a>
    </div>
    <!-- 第三方登录 -->
    <div class="order-login">
      <p>使用第三方账号登录</p>
      <ul>
        <li>
          <a href="#">
            <img src="../../assets/image/QQ.png" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../../assets/image/WeChat.png" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../../assets/image/QQ.png" alt="" />
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import { apiGetCode, apiLogin } from '@/api/login.js'
// import { setLocal } from '@/utils/local.js'

import { getCode, login } from '@/api/api.js'
import { setLocal, removeLocal } from '@/utils/local.js'
export default {
  data () {
    return {
      // 用户信息
      user: {
        mobile: '18888881111',
        code: ''
      },
      // 表单校验
      rules: {
        mobile: [
          { required: true, trigger: 'onBlur' },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请正确输入手机号',
            trigger: 'onBlur'
          }
        ],
        code: [
          { required: true, trigger: 'onBlur' },
          { pattern: /^\d{4}$/, message: '请正确输入验证码', trigger: 'onBlur' }
        ]
      },
      isLoading: false,
      totalTime: 60,
      //   获取的用户信息
      userInfo: ''
    }
  },
  methods: {
    gg () {
      // 移除token
      removeLocal()
      // 跳转到登录页面
      this.$router.push('/company')
    },
    // 获取验证码
    getCode () {
      if (this.totalTime !== 60) {
        return false
      }
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'circular'
      })
      try {
        setTimeout(async () => {
          const res = await getCode({ mobile: this.user.mobile }) // this.user.mobile
          // 判断是否开启倒计时
          if (res.data.data) {
            //  倒计时功能
            this.totalTime--
            const timeInterval = setInterval(() => {
              this.totalTime--
              // 当totalTime==0 清除倒计时  totalTime还原
              if (this.totalTime === 0) {
                clearInterval(timeInterval)
                this.totalTime = 60
              }
            }, 1000)
          }
          // 提示用户验证码
          this.$toast.success(`验证码为 \n ${res.data.data}`)
        }, 1500)
      } catch {
        this.$toast.error('网络异常,请重新获取!')
      }
    },
    // 登录提交
    onSubmit () {
      // 开启加载效果
      this.isLoading = true
      setTimeout(async () => {
        // 关闭加载效果
        this.isLoading = false
        const res = await login(this.user)
        this.userInfo = res.data.data
        console.log(res)
        // 提示用户登录成功
        this.$toast.success('登录成功')
        // 保存token到本地
        setLocal(res.data.data.jwt, 'heimamm_mobile_token')
        console.log(res.data.data.user)
        // 用户信息
        var userInfo = res.data.data.user
        // 头像
        userInfo.avatar = process.env.VUE_APP_URL + userInfo.avatar
        this.$store.commit('SETUSERINFO', userInfo)
        // 跳转到公司页面
        this.$router.push('/my')
      }, 1500)
    }
  }
}
</script>

<style lang="less" scoped>
.f-left {
  float: left;
}
a,
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: black;
}
/* 登录界面--start*/
.login-contain {
  height: 100%;
  background-image: url('../../assets/image/timg.gif');
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.4);
  color: #ffffff;
}
.login-header {
  padding: 5%;
}
.login-header p {
  font-size: 20px;
  color: #ffffff;
  text-align: center;
}
.login-logo {
  padding: 5%;
}
.login-logo img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
}
.login-logo p {
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  letter-spacing: 2px;
  margin-top: 2%;
}
.form-group {
  padding: 5%;
  .van-field {
    margin-top: 30px;
    background-color: transparent;
    border-bottom: 1px solid #ccc;
    .van-button--default {
      background-color: #fff;
    }
    /deep/.van-field__control {
      color: #fff;
      font-size: 14px;
    }
    /deep/.icon-codev2 {
      color: #fff;
      font-size: 20px;
      padding-left: 5px;
    }
    /deep/ .icon-phone {
      color: #fff;
      font-size: 22px;
    }
  }
  .code {
    /deep/.van-field__left-icon {
      padding-top: 2px;
    }
  }
  /deep/ .van-button--primary {
    margin-top: 50px;
    background-color: #00cc99;
  }
}
.casual {
  text-align: center;
}
.casual a {
  color: #ffffff;
  font-size: 18px;
}
.order-login {
  padding: 5%;
  padding-bottom: 30px;
}
.order-login p {
  display: block;
  /*设置为块级元素会独占一行形成上下居中的效果*/
  position: relative;
  /*定位横线（当横线的父元素）*/
  text-align: center;
  font-size: 14px;
  color: #cccccc;
}
.order-login ul {
  margin-left: 25%;
  margin-top: 5%;
  height: 40px;
}
.order-login ul li {
  width: 25%;
  float: left;
}
.order-login ul li a img {
  width: 35px;
  height: 35px;
}
.order-login p:before,
.order-login p:after {
  content: '';
  position: absolute;
  /*定位背景横线的位置*/
  top: 50%;
  background: #cccccc;
  /*背景横线颜色*/
  width: 20%;
  /*单侧横线的长度*/
  height: 1px;
}
.order-login p:before {
  left: 10%;
  /*调整背景横线的左右距离*/
}
.order-login p:after {
  right: 10%;
}
.copyright {
  text-align: center;
  padding: 2%;
}

.code {
  a {
    text-decoration: none;
    position: absolute;
    top: 50%;
    left: 90%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    width: 88px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    /*字母大写 */
    text-transform: uppercase;
    border-radius: 25px;
    z-index: 1;
  }

  a:hover {
    animation: sun 8s infinite;
  }

  @keyframes sun {
    100% {
      background-position: -400% 0;
    }
  }
}
</style>
